
import React, { Component } from "react";
import { Form, Select, Input, Modal } from "antd";
import { ipcRenderer } from "electron";
import Config from './config'

const  serialport = require("serialport");

const Option = Select.Option;

let setting = null;
ipcRenderer.on("msg", (sys, msg) => {

  switch (msg.action) {
    case "setting":
      if (setting) {
        setting.change();
      }
      break;
    default:
      console.log(sys, msg);
  }

});

class Setting extends Component {
  constructor(props) {
    super(props);

    const $t      = this;
    const config  = new Config();

    $t.state            = {visible: false};
    $t.state.cameraList = [];
    $t.state.serialList = [];
    $t.state.baudrateList = [
      9600,19200,38400,57600,115200
    ];

    $t.state.config     = config.load();

    $t.componentDidMount = () => {
      setting = $t;
      navigator.mediaDevices.enumerateDevices().then(devices=> {
        const cameraList = [];
        devices.forEach((mediaDevice) => {
          const {kind,deviceId,label} = mediaDevice;
          if (kind === 'videoinput') {
            cameraList.push({deviceId,label});
          }
        });

        $t.setState({cameraList})
      });

      serialport.list((err,serialList)=>{
        $t.setState({serialList})
      })
    };

    $t.change = () => {
      const {visible} = $t.state;
      $t.setState({visible: !visible});
    };

    $t.saveConfig = ()=>{
      const {validateFields} = $t.props.form;
      validateFields((err, values) => {
        if (!err) {
          $t.change();
          config.save(values);
          // connectDev(values);
          openVideo(values);
        }
      });
    };



    $t.render = () => {
      const {getFieldDecorator} = $t.props.form;
      const formItemLayout = {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
      };

      const { cameraList,config,serialList,baudrateList } = $t.state;

      return (
        <Modal
          width={700}
          title="设备绑定"
          visible={$t.state.visible}
          onOk={$t.saveConfig}
          onCancel={$t.change}
          cancelText="取消"
          okText="确定"
        >
          <Form {...formItemLayout} onSubmit={this.handleSubmit} className="login-form">
            <Form.Item label="姿态传感器">
              {getFieldDecorator('wtgprsDevNo', {
                initialValue:config? config.wtgprsDevNo:undefined,
                rules: [{required: false, message: 'Please input your wtgprsDevNo!'}],
              })(
                <Input placeholder="姿态传感器编号"/>
              )}
            </Form.Item>
            <Form.Item label="心率传感器">
              {getFieldDecorator('heartRateDevNo', {
                initialValue:config?config.heartRateDevNo:undefined,
                rules: [{required: false, message: 'Please input your heartRateDevNo!'}],
              })(
                <Input  placeholder="心率传感器编号"/>
              )}
            </Form.Item>
            <Form.Item label="摄像头">
              {getFieldDecorator('cameraId', {
                initialValue:config? config.cameraId:undefined,
                rules: [{required: false, message: 'Please input your cameraId!'}],
              })(
                <Select >
                  {cameraList.map(({deviceId,label})=>(<Option key={deviceId} value={deviceId}>{label}</Option>))}
                </Select>
              )}
            </Form.Item>
            <Form.Item label="串口">
              {getFieldDecorator('comId', {
                initialValue:config? config.comId:undefined,
                rules: [{required: false, message: 'Please input your cameraId!'}],
              })(
                <Select >
                  {serialList.map(({comName})=>(<Option key={comName} value={comName}>{comName}</Option>))}
                </Select>
              )}
            </Form.Item>
            <Form.Item label="波特率">
              {getFieldDecorator('baudrate', {
                initialValue:config? config.baudrate:undefined,
                rules: [{required: false, message: 'Please input your cameraId!'}],
              })(
                <Select >
                  {baudrateList.map((rate)=>(<Option key={rate} value={rate}>{rate}</Option>))}
                </Select>
              )}
            </Form.Item>
          </Form>
        </Modal>
      )
    }

  }
}

export default Form.create({name: 'normal_login'})(Setting);
